<template>
	<view>
		<view class="headbox">
	
		</view>
		<image class="vipimg" src="/static/image/vip.png"></image>
		<view class="viptit">
			会员权益
		</view>
		
		<view class="getbox">
			<view class="get_icon">
				<text class="icon-chakanyonghu iconfont"></text>
			</view>
			<view class="get_more">
				<view class="get_more0">查看土地权限</view>
				<view class="get_more1">免费查看全部信息</view>
			</view>
		</view>
		<view class="getbox">
			<view class="get_icon">
				<text class="icon-mianguanggao iconfont"></text>
			</view>
			<view class="get_more">
				<view class="get_more0">免广告</view>
				<view class="get_more1">免除所有广告</view>
			</view>
		</view>
		<view class="getbox">
			<view class="get_icon">
				<text class="icon-kefu iconfont"></text>
			</view>
			<view class="get_more">
				<view class="get_more0">专属客服</view>
				<view class="get_more1">一对一专属客服</view>
			</view>
		</view>
		<view class="getbox">
			<view class="get_icon">
				<text class="icon-libaoyouhui iconfont"></text>
			</view>
			<view class="get_more">
				<view class="get_more0">礼包</view>
				<view class="get_more1">会员权限礼包</view>
			</view>
		</view>
		
		
		<view class="viptit">
			会员选择
		</view>
		<view class="viperbox">
			
			<view class="viper_li" :class="[icon==1?'icon':'']" @tap="seticon" data-i="1">
				<view class="viper_li1">月度会员</view>
				<view class="viper_li1">时长1月</view>
				<view class="viper_li1">¥ {{info.month}}</view>
			</view>
			<view class="viper_li " :class="[icon==2?'icon':'']" @tap="seticon" data-i="2">
				<view class="viper_li1">年度会员</view>
				<view class="viper_li1">时长1年</view>
				<view class="viper_li1">¥ {{info.year}}</view>
			</view>
		</view>
		
		<view class="vip_btn" @tap="kaitong">  立即开通 </view>
		
		<view class="kaitong">
			<text class="icon-wancheng iconfont" @tap="tongyi" v-if="status==1"></text>
			<text class="icon-xuanzekuangmoren iconfont" @tap="ntongyi" v-if="status!=1"></text>
			 知悉并同意 <text @tap="seexieyi" class="cicons">《会员权益》</text> 
		</view>
		
	</view>
</template>

<script>
	
	import {curl} from 'common/api.js';
	export default {
		data() {
			return {
				status:0,
				info:[],
				icon:1,
				osname:''
			}
		},
		onShow() {
			uni.getProvider({
					service: 'payment',
					success: function(res) {
						uni.setStorageSync('providerpayment', res.provider[0]);
					}
				});
		},
		onLoad(ret) {
			var that=this;
			curl('index/getmoneyset', {}).then((res) => {
				console.log('详情',res.data);
				that.info=res.data
			});
			
			var xt= uni.getSystemInfoSync().osName;
				console.log('**********',xt);
			that.osname=xt;
		},
		
		methods: {
			
			kaitong(){
				var status=this.status;
				var that=this;
				if (status!=1) {
					
					uni.showToast({
						title:'请阅读并同意协议',
						icon:'none'
					})
					
					return false;
				}
				
				//#ifdef  MP-WEIXIN
					that.wxpay();
				//#endif
				
				//#ifdef MP-TOUTIAO 
				that.ttpay();
				//#endif
				
				
			},
			
			
			ttpay(){
				var icon=this.icon;
				var that=this;
					var xt=this.osname;
				if (xt=='ios') {
					
					uni.showToast({
						title:'当前系统无法支付',
						icon:'none'
					})
					
					return false;
				}	
				
				
				curl('ttink/DouyinPay', {icon:icon}).then((res) => {
					console.log('详情',res.data.data);
		
					var orderString=res.data.data;
					
					uni.requestPayment({
								provider: uni.getStorageSync('providerpayment'),
								// #ifdef MP-TOUTIAO
								orderInfo: orderString,
								service: 5,
								// #endif
					 
								success: function(value) {
									console.log('==== uni.requestPayment success', value);
									// #ifdef MP-TOUTIAO
									let code = value.code
									switch (code) {
										case 0:
											uni.showToast({
												title: '支付成功',
												icon: 'none'
											});
											uni.switchTab({
												url:"/pages/member/index"
											})
											break;
										case 1:
											uni.navigateBack({
												delta: 1
											});
											uni.showToast({
												title: '支付超时',
												icon: 'none'
											})
											break;
										case 2:
											uni.navigateBack({
												delta: 1
											});
											uni.showToast({
												title: '支付失败',
												icon: 'none'
											})
											break;
										case 3:
											uni.navigateBack({
												delta: 1
											});
											uni.showToast({
												title: '支付关闭',
												icon: 'none'
											})
											break;
										case 4:
											uni.navigateBack({
												delta: 1
											});
											uni.showToast({
												title: '支付取消',
												icon: 'none'
											})
											break;
										default:
											console.log('==== uni.requestPayment success code!=0');
											uni.showToast({
												title: '支付失败',
												icon: 'none'
											})
									}
									// #endif
								},
								fail: function(err) {
									console.log('==== uni.requestPayment err', err);
									uni.showToast({
										title: '支付失败',
										icon: 'none'
									})
									uni.navigateBack({
										delta: 1
									});
								}
							})

				
				})
				
			},
			
			
			
			wxpay(){
				var icon=this.icon;
				var that=this;
				
				curl('wxpay/paymonth', {icon:icon}).then((res) => {
					console.log('详情',res.data);
							
				 uni.requestPayment({
				        provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr:  res.data.nonceStr,
						package:  res.data.package,
						signType: 'MD5',
						paySign: res.data.paySign,
				        success: (res) => {
				            // 支付成功，改变订单状态
				            uni.switchTab({
				            	url:"/pages/member/index"
				            })
				        },
				        fail: (err) => {
							  console.log(err.errMsg)
				            uni.showToast({
				              title:'支付失败',
				              'icon':'none'
				            })
				          }
				        })
					
				});
				
			},
			
			
			seticon(ret){
				console.log(ret);
				var i=ret.currentTarget.dataset.i;
				this.icon=i;
			},
			ntongyi(){
				this.status=1;
			},
			
			tongyi(){
				this.status=0;
			},
			
			seexieyi(){
				uni.navigateTo({
					url:"/pages/member/xieyi"
				})
			}
		}
	}
</script>

<style>
	
	.vip_btn{
		background: #08b059;
		width: 680rpx;height: 80rpx;margin:auto;margin-top: 20rpx;
		border-radius: 10rpx;
		text-align: center;line-height: 80rpx;
		font-size: 30rpx;color: #ffffff;
	}
	.viper_li1{
		height: 60rpx;width: 100%;
		text-align: center;line-height: 60rpx;font-size: 28rpx;
	}
	.icon{
		background: #08b059 !important;color: #ffffff !important;
		border: none !important;
	}
	.viper_li{
		width: 200rpx;height: 200rpx;margin-right: 30rpx;
		border-radius: 10rpx;border: 1px solid #ececec;
		color: #666666;
	}
	.viperbox{
		width: 710rpx;height: 270rpx;margin: auto;
		display: flex;align-items: center;
	}
	
	.get_more1{
		height: 30rpx;line-height: 30rpx;font-size: 24rpx;
		font-weight: 400;color: #666666;
	}
	.get_more0{
		height: 40rpx;line-height: 40rpx;font-size: 28rpx;
		font-weight: 500;
	}
	.get_icon>text{
		font-size: 40rpx;
	}
	.get_icon{
		width: 70rpx;height: 70rpx;border-radius: 70rpx;
		text-align: center;line-height: 70rpx;
		background: #37445e;
		color: #fafafa;margin-right: 20rpx;
	}
	.getbox{
		width: 710rpx;height: 140rpx;margin: auto;
		display: flex;align-items: center;
	}
	.viptit{
		width: 710rpx;height: 80rpx;margin: auto;
		line-height: 90rpx;font-weight: bold;
		font-size: 32rpx;
	}
	.kaitong>.iconfont{
		margin-right: 5rpx;font-size: 28rpx;
	}
	.icon-wancheng{
		color: #08b059;
	}
	.cicons{
		color: #08b059;
	}
	.kaitong{
		width: 700rpx;height: 90rpx;
		line-height: 90rpx;margin: auto;
		font-size: 28rpx;color: #666666;font-weight: 500;
	}
	.vipimg{
		width: 680rpx;height: 330rpx;margin: auto;
		margin-top: -150rpx;display: block;
		border-radius: 20rpx;
	}
	.headbox{
		background: #1f2639;
		height: 160rpx;width: 100%;
	}
</style>
